<template>
	<view class="st-search-container" :style="{'padding': spaceBetween ? '20rpx 24rpx' : ''}" @click="directExec">
		<view class="st-search-bar">
			<text class="search-icon iconfont">&#xe61b;</text>
			<view class="search-text" :class="{placeholder: !keyword}" v-if="disabled">{{keyword ? keyword : placeholder}}</view>
			<input 
			class="search-text" 
			type="text" 
			v-else 
			:value="keyword" 
			:disabled="disabled" 
			:placeholder="placeholder" 
			placeholder-style="color: #ccc" 
			@input="onchange"
			@confirm="confirm" />
			<text class="clear-icon iconfont" v-if="keyword" @click.stop="clearKeyword">&#xe61a;</text>
		</view>
	</view>
</template>

<script>
	/**
	 * stSearchBar 搜索栏
	 * @description 搜索栏组件，栏目、列表页顶部使用
	 * @author xuqiang 2023-11-08
	 * @property {Boolean} disabled 是否禁用输入框 true: 禁用, false: 启用
	 * @property {String} placeholder 搜索栏占位符
	 * @property {Boolean} spaceBetween 是否自动撑开间距 true: 有间距, false: 无间距
	 * @property {String} keyword 搜索关键词
	 * @event {Function()} confirm 确认输入时$emit传递自定义onSearch事件
	 * @event {Function()} directExec 当disabled为true时可以绑定此事件作为跳转
	 */
	export default {
		name:"st-search-bar",
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: '请输入关键词'
			},
			spaceBetween: {
				type: Boolean,
				default: true
			},
			keyword: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showClearIcon: false,
			};
		},
		methods: {
			directExec(){
				if(!this.disabled) return
				this.$emit('directExec')
			},
			confirm(e){
				this.$emit('onSearch', e)
			},
			onchange(e){
				this.$emit('onchange', e)
			},
			clearKeyword(){
				this.$emit('onclear')
			}
		}
	}
</script>

<style lang="scss" scoped>
.st-search-bar{
	display: flex;
	align-items: center;
	padding: 0 6rpx;
	height: 64rpx;
	border-radius: 40rpx;
	background: #f6f6f6;
	.search-icon{
		color: #7a7a7a;
		width: 64rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		flex: 0 0 auto;
		font-size: 32rpx
	}
	.search-text{
		flex: 1 1 auto;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		&.placeholder{
			color: #ccc;
		}
	}
	.clear-icon{
		color: #ccc;
		width: 64rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		flex: 0 0 auto;
		font-size: 32rpx
	}
}
</style>